<template>
  <el-row>
    <el-col :span="12">
      <div class="square">
        <draggable class="square-inner flex"
                   handle=".handle"
                   :list="list1"
                   tag="ul"
                   :options="{group: {name: 'people', pull: true, put: false}, animation: 300, sort: true, ghostClass: 'ghost'}"
                   @end="end"
                   @start="start"
                   :move="move"
        >
          <transition-group name="fade" tag="li" v-for="element in list1" :key="element.id" style="width: 200px; height: 200px;">
            <div :key="element.id" style="line-height: 200px;">
              <i v-if="enableMove" class="el-icon-s-grid handle" style="font-size: 20px; position: relative; cursor: move;"></i>
              {{element.name}}
            </div>
          </transition-group>
        </draggable>
      </div>
    </el-col>
    <el-col :span="12">
      <div style="width: 200px; height: auto; margin: 20px; border: 1px solid #000;">
        {{showLabel()}}
      </div>
      <el-button @click="enableMove = true">开启移动</el-button>
      <el-button @click="enableMove = false">关闭移动</el-button>
      <fm-address></fm-address>
    </el-col>
  </el-row>

</template>

<script>
  import Draggable from 'vuedraggable'
  import FmAddress from '../components/FmAddress'
  export default {
    name: "DraggableGrid",
    components: {
      Draggable,
      FmAddress
    },
    data() {
      return {
        list1: [{
          id: 1,
          name: 'A'
        }, {
          id: 2,
          name: 'B'
        }, {
          id: 3,
          name: 'C'
        }, {
          id: 4,
          name: 'D'
        }, {
          id: 5,
          name: 'E'
        }, {
          id: 6,
          name: 'F'
        }, {
          id: 7,
          name: 'G'
        }, {
          id: 8,
          name: 'H'
        }, {
          id: 9,
          name: 'I'
        }],
        isDragging: false,
        delayedDragging: false,
        enableMove: false
      }
    },

    methods: {
      start (evt) {
        console.log('start1')
        this.isDragging = true
      },
      end (evt) {
        console.log('end1', evt)
        this.isDragging = false
      },
      move({ relatedContext, draggedContext }) {
        const relatedElement = relatedContext.element;
        const draggedElement = draggedContext.element;
        return ((!relatedElement || !relatedElement.fixed) && !draggedElement.fixed);
      },
      add(evt) {
        console.log('add2', evt)
      },
      showLabel() {
        return JSON.stringify(this.list1)
      },
    },
    watch: {
      isDragging: {
       handler(newValue) {
         if (newValue) {
           this.delayedDragging = true;
           return;
         }
         this.$nextTick(() => {
           this.delayedDragging = false;
         });
       }
      }
    }
  }
</script>
<style>
  .square{
    position: relative;
    width: 100%;
    height: 0;
    /*padding-bottom: 100%; !* padding百分比是相对父元素宽度计算的 *!*/
    margin-bottom: 30px;
  }
  .square-inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
  }
  .square-inner > li{
    width: calc(100% / 3);  /* calc里面的运算符两边要空格 */
    height: calc(100% / 3);
    /*margin-right: 1%;*/
    /*margin-bottom: 1%;*/
    margin: 4px;
    overflow: hidden;
  }

  .flex{
    display: flex;
    flex-wrap: wrap;
  }
  .flex>li{
    /*flex-grow: 1; !* 子元素按1/n的比例进行拉伸 *!*/
    background-color: #4d839c;
    text-align: center;
    color: #fff;
    font-size: 50px;
    line-height: 2;
  }
  .flex>li:nth-of-type(3n){ /* 选择个数是3的倍数的元素 */
    margin-right: 0;
  }
  .flex>li:nth-of-type(n+7){  /* 选择倒数的三个元素，n可以取0 */
    margin-bottom: 0;
  }
</style>
